<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员Rain的学习日记</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="nav-brand">
                <h1>Rain's Dev Diary</h1>
            </div>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#diaries">日记</a></li>
                <li><a href="#about">关于我</a></li>
            </ul>
            <div class="search-container">
                <input type="text" id="search-input" placeholder="搜索日记...">
                <button id="search-btn">搜索</button>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h2>欢迎来到Rain的学习日记</h2>
                <p>记录我的编程学习之旅，分享技术心得与成长经历</p>
                <button id="view-diaries-btn">查看日记</button>
            </div>
        </section>

        <section id="diaries" class="diaries-section">
            <h2>学习日记</h2>
            <div class="diaries-container" id="diaries-container">
                <!-- 日记卡片将通过JavaScript动态生成 -->
            </div>
        </section>

        <section id="about" class="about-section">
            <h2>关于我</h2>
            <div class="about-content">
                <img src="https://picsum.photos/200/200" alt="Rain的头像" class="profile-img">
                <div class="about-text">
                    <h3>程序员Rain</h3>
                    <p>一名热爱编程的全栈开发者，专注于Web技术和人工智能。这个博客记录了我的学习历程和技术思考。</p>
                    <p>掌握技能: JavaScript, Python, React, Node.js</p>
                </div>
            </div>
        </section>
    </main>

    <div id="diary-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="modal-title"></h2>
            <p id="modal-date" class="diary-date"></p>
            <div id="modal-content" class="diary-content"></div>
        </div>
    </div>

    <footer>
        <p>&copy; 2023 程序员Rain的学习日记. 保留所有权利.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>